window.onload = function () {
    //功能1：实现左右箭头的显示与隐藏
    let arrowLeft = document.querySelector(".arrow-left")
    let arrowRight = document.querySelector(".arrow-right")
    let banner = document.querySelector(".banner")

    banner.addEventListener('mouseenter', () => {
        arrowLeft.style.display = 'block'
        arrowRight.style.display = 'block'
        //定时器取消
        clearInterval(myTimer)
    })

    banner.addEventListener('mouseleave', () => {
        arrowLeft.style.display = 'none'
        arrowRight.style.display = 'none'
        //定时器生效
        myTimer = setInterval(()=>{
            arrowRight.click()
        },2000)
    })

    //功能2：生成小圆圈
    let ol = document.querySelector(".circle")
    let ul = document.querySelector(".banner-image")
    let uLis = ul.querySelectorAll("li")
    for (let i = 0; i < uLis.length; i++) {
        let oli = document.createElement("li")
        if (i === 0) {
            oli.className = 'current'
        }
        //给圆圈编号，从0开始
        oli.setAttribute("index", i)
        ol.appendChild(oli)


    }

    //功能3：小圆圈的切换功能
    let oLis = ol.querySelectorAll("li")
    oLis.forEach((oLi) => {
        oLi.addEventListener('click', function () {
            oLis.forEach((li) => {
                li.className = ''
            })
            this.className = 'current'
            //功能4：滑动轮播图
            let index = parseInt(this.getAttribute("index"))
            let stepWidth = 720
            animation(ul, -stepWidth * index)
        })
    })


    //功能5：点击向右箭头按钮，实现图片滑动
    var circle = 0  //小圆圈的计数器
    var num = 0;   //计数器，统计点击按钮几次
    var carouselAmount = 4;
    //克隆ul中第一张图片，
    let firstuLi = ul.firstElementChild;
    let firstuLiClone = firstuLi.cloneNode(true);
    //将克隆出来的li放在ul的最后面
    ul.appendChild(firstuLiClone)

    arrowRight.addEventListener('click', function () {
        num++;
        //计算图片滑动的距离
        if (num > carouselAmount) {
            num = 1
            ul.style.left = '0px'
        }
        animation(ul, -num * 720)
        //功能6：小圆圈跟随变化
        circle++;
        if(circle==carouselAmount){
            circle = 0;
        }
        //将所有小圆圈上面的样式，去掉
        let oLis = ol.querySelectorAll("li")
        oLis.forEach(function (oLi) {
            oLi.className = ''
            //给当前的小圆圈，加上样式
            let index = oLi.getAttribute('index') - 0
            console.log(circle+","+index)
            if(circle === index){
                oLi.className = 'current'
            }
        })
    })

    //功能8：自动播放
    var myTimer = setInterval(()=>{
        arrowRight.click()
    },2000)

}